<template>
  <div class="page-music-table">
    <zj-table
      :listData="dataList"
      v-bind="contentTableConfig"
      @dbClick="dbClick"
    >
      <!-- 1.header中的插槽 -->
      <template #headerHandler v-if="headerBtnShow">
        <div class="top-btn">
          <el-button
            size="small"
            :icon="VideoPlay"
            circle
            @click="handlePlayAll"
          ></el-button>
          <el-button
            size="small"
            :icon="FirstAidKit"
            circle
            @click="handleCollect"
          ></el-button>
        </div>
      </template>
      <template #musictime="scope">
        <span>{{
          $filters.formatMusicTime(scope.row[`${propName.time}`])
        }}</span>
      </template>
      <template #singer="scope">
        <div class="text-full-hidden">
          {{ scope.row[`${propName.artists}`][0].name }}
        </div>
      </template>
      <template #singname="scope">
        <div class="text-full-hidden">
          {{ scope.row.name }}
        </div>
      </template>
      <template #singalia="scope">
        <div class="text-full-hidden">
          {{ scope.row.name }}
          <span class="alia-txt">{{ scope.row.alia[0] }}</span>
        </div>
      </template>
      <template #album="scope">
        <div class="text-full-hidden">
          {{ scope.row[`${propName.album}`].name }}
        </div>
      </template>
      <!-- 在page-content中动态插入剩余的插槽 -->
      <!-- template中的 #[item.slotName]="scope"为了对应上table里的插槽 -->
      <!-- 把template中的内容插入到table对应的插槽 -->
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <!-- template中的插槽为了接应 用到page-content中的对应插槽 -->
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </zj-table>
    <div class="lookAll" v-if="lookShow" @click="lookAll">
      查看全部{{ total }}首
      <el-icon style="top: 2px"><arrow-right /></el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { useStore } from 'vuex'
import ZjTable from '@/base-ui/table'
import { FirstAidKit, VideoPlay } from '@element-plus/icons-vue'

const props = defineProps({
  contentTableConfig: {
    type: Object,
    require: true
  },
  dataList: {
    type: Array,
    default: () => []
  },
  lookShow: {
    type: Boolean,
    default: true
  },
  total: {
    type: Number,
    default: 99
  },
  headerBtnShow: {
    type: Boolean,
    default: true
  },
  propName: {
    type: Object,
    default: () => ({
      time: 'duration',
      artists: 'artists',
      album: 'album'
    })
  }
})
const store = useStore()
const emit = defineEmits(['handleShowAll', 'hanelDbPlay'])

// 获取其他的动态插槽名称(需要由父组件决定的部分列)
const otherPropSlots = props.contentTableConfig?.propList.filter(
  (item: any) => {
    if (item.slotName === 'album') return false
    if (item.slotName === 'singer') return false
    if (item.slotName === 'singname') return false
    if (item.slotName === 'musictime') return false
    if (item.slotName === 'singalia') return false
    return true
  }
)

const lookAll = () => {
  console.log('查看全部')
  emit('handleShowAll')
}
const handleCollect = () => {
  console.log('收藏全部')
}
const handlePlayAll = () => {
  console.log('播放全部')
}

// 双击了表格 播放音乐
const dbClick = (row: any) => {
  store.dispatch('music/playMusic', row)
  emit('hanelDbPlay')
  // setTimeout(() => {
  //   console.log(store.state.music.musicList)
  // }, 1000)
}
</script>

<style lang="less">
.page-music-table {
  position: relative;
  .top-btn {
    position: absolute;
    top: -51px;
    right: 1px;
  }
  // .el-table__header-wrapper {
  //   display: none;
  // }
  .lookAll {
    display: inline-block;
    font-size: 14px;
    margin-top: 8px;
    cursor: pointer;
    color: #ccc;
  }
  .lookAll:hover {
    color: #666;
  }
  .alia-txt {
    color: #ccc;
  }
}
</style>
